<template>
  <view class="bottom_nav">
    <view class="bottom_nav_item" @tap="handleToHome('/pages/index/index')">
      <Image
        :src="props.activeIndex === 0 ? HomeActiveIcon : HomeIcon"
        class="icon"
      />
      <text
        class="bottom_nav_item_text"
        :class="{ active: props.activeIndex === 0 }"
      >
        首页
      </text>
    </view>

    <view class="bottom_nav_item" @tap="handleToMy('/pages/my/my')">
      <Image
        :src="props.activeIndex === 1 ? MyActiveIcon : MyIcon"
        class="icon"
      />

      <text
        class="bottom_nav_item_text"
        :class="{ active: props.activeIndex === 1 }"
      >
        我的
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro, { useRouter } from "@tarojs/taro";
import HomeActiveIcon from "../assets/images/bottom_nav_home_active.png";
import HomeIcon from "../assets/images/bottom_nav_home.png";
import MyIcon from "../assets/images/bottom_nav_my.png";
import MyActiveIcon from "../assets/images/bottom_nav_my_active.png";

// props
const props = defineProps({
  activeIndex: {
    type: Number,
    default: 0,
  },
});

const router = useRouter();

const handleToHome = (url: string) => {
  // 判断是否是当前页面
  if (router.path === url) {
    return;
  }

  // 使用 redirectTo 替换当前页面，避免页面栈溢出
  Taro.redirectTo({
    url,
  });
};

const handleToMy = (url: string) => {
  // 判断是否是当前页面
  if (router.path === url) {
    return;
  }

  // 使用 redirectTo 替换当前页面，避免页面栈溢出
  Taro.redirectTo({
    url,
  });
};
</script>

<style lang="scss">
.bottom_nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 62px;
  padding: 0px 100px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  // box-sizing: content-box;

  .bottom_nav_item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 5px;

    .icon {
      width: 24px;
      height: 24px;
    }

    .bottom_nav_item_text {
      font-weight: 400;
      font-size: 12px;
      color: #aaaaaa;
      font-style: normal;
      text-transform: none;

      &.active {
        color: #16ada4;
      }
    }
  }
}
</style>
